<template>
	<el-dialog class="abow-dialog" v-dialogDrag :visible.sync="visible" top="10vh" title="订单详情"
		:close-on-click-modal="false" :close-on-press-escape="false" width="700px">
		<el-dialog class="innerDialog" width="530px" title="确认操作" :visible.sync="refundReasonVisible"
			append-to-body>
			<div class="d-flex a-cneter my-20">
				<el-form class="form" :model="dataForm" :rules="dataRule" ref="dataForm" label-width="120px" size="medium"
					:inline="false" labelSuffix="：">
					<el-form-item class="mb-0" prop="refund_reason" label="退款理由" size="medium">
						<el-select class="selectItem" clearable v-model="dataForm.refund_reason" placeholder="请选择">
							<el-option v-for="(item,index) in reasonData" :key="index" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</div>
			<template slot="footer">
				<el-button type="danger"
					@click="submitHandle()">确认退款</el-button>
			</template>
		</el-dialog>
		<div class="d-flex flex-column">
			<div class="d-flex flex-row font-md mb-10">
				<div class="d-flex text-orangedeep">
					{{'订单ID '+orderInfoData.id}}
				</div>
			</div>
			<div class="d-flex flex-column a-cneter j-center" v-loading="initloadding" element-loading-text="正在获取中"
				style="overflow-y: auto;">
				<template v-if="JSON.stringify(orderDetail)!='{}'">
					<el-descriptions title="" :column="1" border labelClassName="labelClass">
						<el-descriptions-item :label="(orderInfoData.type==1?'微信':orderInfoData.type==2?'抖音':'')+'订单ID'">
							{{orderDetail.order_id}}
							<el-tag v-if="orderDetail.order_id" @click="copyText(orderDetail.order_id)" class="pointer ml-5" size="medium">复制</el-tag></el-descriptions-item>
						<el-descriptions-item v-if="orderDetail.order_fee" label="订单金额">{{orderDetail.order_fee||0}}元</el-descriptions-item>
						<el-descriptions-item v-if="orderDetail.paid_fee" label="支付金额">{{orderDetail.paid_fee||0}}元</el-descriptions-item>
						<el-descriptions-item v-if="orderDetail.status_name" label="订单状态">
							<div class="font-weight" style="font-size: 17px;" :class="orderDetail.status==4?'':'text-danger'">
								{{orderDetail.status_name}}
							</div>
						</el-descriptions-item>
						<el-descriptions-item v-if="orderDetail.paid_time" label="支付/退款时间">{{orderDetail.paid_time}}</el-descriptions-item>
						<el-descriptions-item v-if="orderDetail.provide_time" label="看币发放时间">{{orderDetail.provide_time}}</el-descriptions-item>
						<el-descriptions-item v-if="orderDetail.wxpay_order_id" label="微信内部单号">
							{{orderDetail.wxpay_order_id}}
							<el-tag v-if="orderDetail.wxpay_order_id" @click="copyText(orderDetail.wxpay_order_id)" class="pointer ml-5" size="medium">复制</el-tag></el-descriptions-item>
						<el-descriptions-item v-if="orderDetail.create_time" label="创建时间">{{orderDetail.create_time}}</el-descriptions-item>
						<el-descriptions-item v-if="orderDetail.update_time" label="修改时间">{{orderDetail.update_time}}</el-descriptions-item>
						<el-descriptions-item v-if="orderDetail.dypay_order_id" label=" 抖音内部单号">{{orderDetail.dypay_order_id}}</el-descriptions-item>
						<el-descriptions-item v-if="orderDetail.channel_pay_id" label="渠道单号">{{orderDetail.channel_pay_id}}</el-descriptions-item>
					</el-descriptions>
				</template>
				<!-- 数据空 -->
				<template v-else-if="!initloadding">
					<el-empty :image-size="180" description="暂无该订单信息"></el-empty>
				</template>
			</div>
		</div>
		<template slot="footer">
			<el-tooltip v-if="!initloadding&&JSON.stringify(orderDetail)!='{}'&&$hasPermission('delivery:payment:refundOrder')" class="item" effect="dark" :content="orderDetail.status_name" placement="top">
				<el-button :disabled="orderDetail.status==4&&orderDetail.is_apply!=1?false:true" type="danger"
					@click="openRefundReason()">{{orderDetail.status==4&&orderDetail.is_apply!=1?'提交退款':'不可退款'}}</el-button>
			</el-tooltip>
			<el-tooltip v-if="!initloadding&&JSON.stringify(orderDetail)!='{}'&&$hasPermission('delivery:payment:refundOrder')" class="item" effect="dark" :content="orderDetail.status_name" placement="top">
				<el-button :disabled="orderDetail.status==4&&orderDetail.payment_type==2&&orderDetail.payment_status==1&&orderDetail.is_supplementary!=1?false:true" type="danger"
					@click="supplementaryOrder()">{{orderDetail.status==4&&orderDetail.payment_type==2&&orderDetail.payment_status==1&&orderDetail.is_supplementary!=1?'提交补单':'不可补单'}}</el-button>
			</el-tooltip>
			<div v-else style="height: 40px;"></div>
		</template>
	</el-dialog>
</template>

<script>
	let that;
	import * as clipboard from 'clipboard-polyfill'
	export default {
		components: {},
		data() {
			return {
				diy_mark:1,
				type: 1,
				dataForm:{
					refund_reason:''
				},
				reasonData:[],
				refundReasonVisible: false,
				initloadding: false,
				visible: false,
				orderInfoData: {},
				orderDetail: {},
				activeNames: [1]
			}
		},
		created() {},
		mounted() {
			that = this;
		},
		computed: {
			dataRule() {
				return {
					refund_reason: [{
						required: true,
						message: '退款理由不能为空!',
						trigger: ['blur', 'change']
					}],
				}
			}
		},
		watch: {},
		methods: {
			copyText(text) {
				console.log(text);
				if (!text) {
					return that.$message({
						message: '数据为空，无法复制！',
						type: 'error',
						duration: 1500
					})
				}
				clipboard.writeText(text).then(
					function() {
						that.$message({
							message: '复制成功！',
							type: 'success',
							duration: 1500
						})
					},
					function() {
						that.$message({
							message: '复制失败！',
							type: 'error',
							duration: 1500
						})
					}
				);
			},
			init(row) {
				this.visible = true;
				this.orderInfoData = row;
				this.initloadding = true;
				this.getOrderInfo(row);
			},
			init2(row) {
				this.visible = true;
				this.orderInfoData = row;
				this.initloadding = true;
				this.diy_mark = 2;
				this.orderDetail = {};
				this.getBackhaulInfo(row);
			},
			async getBackhaulInfo(row) {
				const orderRes = await this.$axios.get(`/api/delivery/payment/backhaulInfo/${row.id}`);
				this.initloadding = false;
				console.log(145,orderRes);
				this.$nextTick(() => {
					this.orderDetail = orderRes;
					console.log(this.orderDetail);
				})
			},
			async getOrderInfo(row) {
				const orderRes = await this.$axios.get(`/api/delivery/payment/getOrderDetail/${row.id}`);
				this.initloadding = false;
				console.log(orderRes);
				this.$nextTick(() => {
					if(orderRes.code==200){
						if (typeof orderRes.data == 'object' && orderRes.data != null) {
							this.orderDetail = orderRes.data;
							console.log(this.orderDetail);
							return
						}
					}
					if(orderRes.message && typeof orderRes.message == 'string'){
						this.$message({
							message: '接口出错：'+orderRes.message,
							type: 'error',
							duration: 1500
						})
					}
					this.orderDetail = {};
				})
			},
			//退款理由弹窗
			openRefundReason() {
				this.refundReasonVisible = true;
				this.$axios.get(`/api/common/refundReason/${this.orderInfoData.type}`).then(res => {
					console.log('退款理由接口返回',res);
					if(Array.isArray(res)){
						if(res.length){
							this.reasonData = res;
							console.log(this.reasonData);
							return;
						}
					}
					this.reasonData = [];
				});
			},
			// 补单
			
			supplementaryOrder() {
			
				console.log(201, this.orderInfoData.id)
				this.$confirm('是否提交补单?', '重要提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$axios.post(`/api/delivery/payment/supplementaryOrder`,{
							payment_id:this.orderInfoData.id
						}).then(res => {
							console.log('补单',res);
							this.$message({
								message: '提交补单成功！',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.visible = false;
									this.$emit('refreshDataList');
								}
							})
							this.$emit('refreshDataList');		
						});
					}).catch(err => {
						this.$message({
							message: '提交补单失败！',
							type: 'error',
							duration: 1500
						})
					});
			},
			// 确认提交
			submitHandle() {
				this.$refs.dataForm.validate((valid) => {
					if (!valid) {
						return false
					}
					this.refundReasonVisible = false;
					this.$confirm('是否提交退款?', '重要提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$axios.post(`/api/delivery/payment/refundOrder`,{payment_id:this.orderInfoData.id,refund_reason:this.dataForm.refund_reason}).then(res => {
							this.$message({
								message: '提交退款成功！',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.visible = false;
									this.$emit('refreshDataList');
								}
							})
						});
					}).catch(err => {
						if (err == 'cancel') return;
						this.$message({
							message: '提交退款失败！',
							type: 'error',
							duration: 1500
						})
					});
				})
			},
			handleChange(val) {
				console.log(val);
			}
		}
	}
</script>

<style lang="scss" scoped>
	:deep(.el-dialog__header) {
		padding: 20px 28px 10px 28px !important;
	}

	:deep(.el-dialog__body) {
		padding: 10px 25px 10px 25px !important;
	}

	:deep(.labelClass) {
		width: 125px;
	}

	:deep(.el-dialog__footer) {
		padding: 0px 25px 25px 25px !important;
	}

	:deep(.el-descriptions-item__cell) {
		padding: 12px 15px !important;
	}
	.selectItem{
		width: 300px;
	}
</style>